<template>
  <div class="cpzx">
    <!-- 标题 -->
    <div class="tit">
      <h2>{{ tit.mainTit }}</h2>
      <p>{{ tit.subHead }}</p>
    </div>
    <!-- 内容开始 -->
    <div class="cpzx-box">
      <!-- 头部 -->
      <div class="head">
        <img src="../../assets/img/common/product.png" alt="产品中心">
        <p>产品 / Product</p>
      </div>
      <!-- box -->
      <div class="box">
        <!-- 头部开始 -->
        <div class="top-box">
          <div
            class="top-item-box"
            v-for="(item, index) in topBox"
            :key="item.index"
          >
            <!-- normal开始 -->
            <div
              class="normal-box"
              v-if="item.type"
              :class="{borderCss: item.name == 'zhdj'}"
              @mouseover="mouseOver(index)"
            >
              <!-- img -->
              <div class="img-box">
                <img :src="item.img[0].imgNormal" alt="">
              </div>
              <!-- text -->
              <div class="text-box">
                <h2>{{ item.text.mainTit }}</h2>
                <p>{{ item.text.subHead }}</p>
              </div>
            </div>
            <!-- normal结束 -->

            <!-- hover开始 -->
            <div
              class="hover-box"
              v-else
              @mouseleave="mouseLeave(index)"
            >
              <!-- text -->
              <div class="text-box">
                <h2 class="main-tit">{{ item.text.mainTit }}</h2>
                <p class="product">{{ item.text.product }}</p>
                <p class="sub-head">{{ item.text.subHead }}</p>
                <p class="user-peo">{{ item.text.userPeo }}</p>
              </div>
              <!-- img -->
              <div class="img-box">
                <img :src="item.img[1].imgHover" alt="">
                <div
                  class="ljgd"
                  @click="btnClick(item.goto)"
                >
                  了解更多
                </div>
              </div>
            </div>
            <!-- hover结束 -->
          </div>
        </div>
        <!-- 头部结束 -->
        <!-- 中间开始 -->
        <div class="center-box">
          <div
            class="center-item-box"
            v-for="(item, index) in centerBox"
            :key="item.index"
          >
            <!-- normal开始 -->
            <div
              class="normal-box"
              :class="[
                {borderCss: item.name == 'zhjd'},
                {borderCss: item.name == 'wyzw'},
                {borderNone: item.name == 'wydn'},
                {borderCss: item.name == 'yqdn'},
                {borderCss: item.name == 'szxc'},
                {borderNone: item.name == 'zyz'},
              ]"
              v-if="item.type"
              @mouseover="centerOver(index)"
            >
              <!-- img -->
              <div class="img-box">
                <img :src="item.img[0].imgNormal" alt="">
              </div>
              <!-- text -->
              <div class="text-box">
                <h2>{{ item.text.mainTit }}</h2>
              </div>
            </div>
            <!-- normal结束 -->
            <!-- hover开始 -->
            <div
              class="hover-box"
              v-else
              @mouseleave="centerLeave(index)"
            >
              <!-- text -->
              <div class="text-box">
                <h2>{{ item.text.mainTit }}</h2>
                <p>{{ item.text.userPeo }}</p>
              </div>
              <!-- img -->
              <div class="img-box">
                <img :src="item.img[1].imgHover" alt="">
                <div
                  class="ljgd"
                  @click="btnClick(item.goto)" >
                  了解更多
                </div>
              </div>
            </div>
            <!-- hover结束 -->
          </div>
        </div>
        <!-- 中间结束 -->
      </div>
    </div>
    <!-- 内容结束 -->
  </div>
</template>

<script>
export default {
  name: "Cpzx",
  data() {
    return {
      tit: {
        mainTit: "一诺云产品中心",
        subHead: "一诺万金，您值得托付的信息化合作伙伴"
      },
      topBox: [
        {
          name: 'zhdj',
          type: true,
          goto: "/cpzx/zhdj",
          img: [
            {imgNormal: require("assets/img/home/cpzx/zhdj-normal.png")},
            {imgHover: require("assets/img/home/cpzx/zhdj-hover.png")}
          ],
          text: {
            mainTit: "智慧党建平台",
            product: "党务产品",
            subHead: "智慧党建平台主要适用于省、市、区/县物业行政主管部门，同时融合街道办事处、社区居委会党组织和党员... ",
            userPeo: "适用对象：各级组织部、各级党委、党支部、行政主管部门、街道办事处、社区居委会"
          }
        },
        {
          name: 'zzwg',
          type: true,
          goto: "/cpzx/zzwg",
          img: [
            {imgNormal: require("assets/img/home/cpzx/zzwg-normal.png")},
            {imgHover: require("assets/img/home/cpzx/zzwg-hover.png")}
          ],
          text: {
            mainTit: "综治网格化平台",
            product: "政务产品",
            subHead: "网格综治化主要是依托于统一管理数字化平台，将社区按照一定的标准划分成统一的单元网格... ",
            userPeo: "适用对象：政法委、公安机关、街道办事处、社区居委会、社会组织、群众"
          }
        },
      ],
      centerBox: [
        {
          name: 'zhjd',
          type: true,
          goto: "/cpzx/zhjd",
          img: [
            {imgNormal: require("assets/img/home/cpzx/zhjd-normal.png")},
            {imgHover: require("assets/img/home/cpzx/zhjd-hover.png")}
          ],
          text: {
            mainTit: "智慧街道/社区政务平台",
            userPeo: "适用对象：行政主管部门、街道办事处、社区居委会、党委（组）、党总支"
          }
        },
        {
          name: 'wyzw',
          type: true,
          goto: "/cpzx/wyzw",
          img: [
            {imgNormal: require("assets/img/home/cpzx/wyzw-normal.png")},
            {imgHover: require("assets/img/home/cpzx/wyzw-hover.png")}
          ],
          text: {
            mainTit: "物业政务监管平台",
            userPeo: "适用对象：物业行政主管部门、街道办事处、社区居委会、物业服务企业"
          }
        },
        {
          name: 'wydn',
          type: true,
          goto: "/cpzx/wydn",
          img: [
            {imgNormal: require("assets/img/home/cpzx/wydn-normal.png")},
            {imgHover: require("assets/img/home/cpzx/wydn-hover.png")}
          ],
          text: {
            mainTit: "智慧物业大脑平台",
            userPeo: "适用对象：物业服务企业、物业员工、商家、居民"
          }
        },
        {
          name: 'yqdn',
          type: true,
          goto: "/cpzx/yqdn",
          img: [
            {imgNormal: require("assets/img/home/cpzx/yqdn-normal.png")},
            {imgHover: require("assets/img/home/cpzx/yqdn-hover.png")}
          ],
          text: {
            mainTit: "智慧园区大脑平台",
            userPeo: "适用对象：工业园区、自贸园区、产业园区、公司办公园区、物业服务企业、物业员工"
          }
        },
        {
          name: 'szxc',
          type: true,
          goto: "/cpzx/szxc",
          img: [
            {imgNormal: require("assets/img/home/cpzx/szxc-normal.png")},
            {imgHover: require("assets/img/home/cpzx/szxc-hover.png")}
          ],
          text: {
            mainTit: "美丽数字乡村平台",
            userPeo: "适用对象：乡村振兴局、乡镇政府、村委会"
          }
        },
        {
          name: 'zyz',
          type: true,
          goto: "/cpzx/zyz",
          img: [
            {imgNormal: require("assets/img/home/cpzx/zyz-normal.png")},
            {imgHover: require("assets/img/home/cpzx/zyz-hover.png")}
          ],
          text: {
            mainTit: "志愿者服务平台",
            userPeo: "适用对象：党组织、街道办事处、社区居委会、志愿者组织、党员、志愿者"
          }
        }
      ]
    }
  },
  methods: {
    // 点击跳转页面
    btnClick(goto) {
      this.$router.push({
        // 配置路径
        path: goto,
        // 配置参数
        query: {
          link: "cpzx"
        }
      });
    },
    mouseOver(index) {
      this.topBox[index].type = false;
    },
    mouseLeave(index) {
      this.topBox[index].type = true;
    },

    centerOver(index) {
      this.centerBox[index].type = false;
    },
    centerLeave(index) {
      this.centerBox[index].type = true;
    }
  }
}
</script>

<style>
  .cpzx {
    width: 62.5%;
    margin: 40px auto;
    text-align: center;
  }

  /* 标题 */
  .cpzx .tit {
    margin-bottom: 24px;
  }

  .cpzx .tit h2 {
    font-size: 36px;
    font-weight: 1000;
    color: #333;
    margin-bottom: 8px;
  }

  .cpzx .tit p {
    font-size: 16px;
    color: #666;
  }

  /* 头部 */
  .cpzx .head {
    height: 64px;
    background-image: url("../../assets/img/common/red-bg.png");
    display: flex;
    align-items: center;
  }

  .cpzx .head img {
    margin-left: 24px;
    margin-right: 8px;
  }

  .cpzx .head p {
    font-size: 20px;
    color: #fff;
  }

  /* 第一行正常样式开始 */
  .cpzx .top-box {
    display: flex;
  }

  .cpzx .top-item-box {
    flex: 1;
    border-bottom: 2px solid #f7f7f7;
  }

  .cpzx .top-item-box .normal-box {
    height: 266px;
    background-color: #fff;
    padding: 24px 0;
  }
  
  .cpzx .top-item-box .normal-box img {
    margin-bottom: 16px;
  }

  .cpzx .top-item-box .normal-box h2 {
    font-size: 28px;
    font-weight: 1000;
    margin-bottom: 24px;
    color: #333;
  }

  .cpzx .top-item-box .normal-box p {
    font-size: 16px;
    color: #666;
    padding: 0 24px;
  }

  /* 单独有边框 */
  .borderCss {
    border-right: 2px solid #f7f7f7;
  }

  /* 单独无边框 */
  .borderNone {
    border-right: none;
  }

  /* 第一行正常样式结束 */

  /* 第一个hover样式开始 */
  .cpzx .top-item-box .hover-box {
    height: 266px;
    color: #fff;
    background: linear-gradient(to right, #f5222d, #ff7875);
    text-align: left;
    display: flex;
    padding: 24px;
  }

  .cpzx .top-item-box .hover-box h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 1000;
    margin-bottom: 8px;
  }

  .cpzx .top-item-box .hover-box .product {
    margin-bottom: 24px;
  }

  .cpzx .top-item-box .hover-box .sub-head {
    padding-right: 16px;
  }

  .cpzx .top-item-box .hover-box .user-peo {
    margin-top: 16px;
    padding-right: 16px;
  }

  .cpzx .top-item-box .hover-box .img-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  /* 了解更多 */
  .ljgd {
    width: 88px;
    height: 32px;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50px;
    text-align: center;
    line-height: 28px;
  }

  .ljgd:hover {
    background-color: #fff;
    color: #333;
    cursor: pointer;
  }
  
  /* 第一个hover样式结束 */

  /* 第二个normal样式开始 */
  .center-box {
    display: flex;
    flex-wrap: wrap;
  }

  .center-item-box {
    width: 33.33%;
    border-bottom: 2px solid #f7f7f7;
  }

  .center-item-box .normal-box {
    height: 160px;
    padding: 36px 0;
    /* background-color: #bfa; */
  }

  .center-item-box .normal-box img {
    margin-bottom: 16px;
  }

  .center-item-box .normal-box h2 {
    font-size: 18px;
    font-weight: 1000;
    color: #333;
  }
  /* 第二个normal样式结束 */

  /* 第二个hover样式开始 */
  .center-item-box .hover-box {
    text-align: left;
    height: 160px;
    padding: 24px;
    background: linear-gradient(to right, #f5222d, #ff7875);
    display: flex;
  }

  .center-item-box .hover-box .text-box h2 {
    font-size: 20px;
    font-weight: 1000;
    color: #fff;
    margin-bottom: 24px;
  }

  .center-item-box .hover-box .text-box p {
    font-size: 14px;
    color: #fff;
    padding-right: 24px;
  }

  .center-item-box .hover-box .img-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  /* 第二个hover样式结束 */

  .cpzx .top-item-box .hover-box,
  .cpzx .center-item-box .hover-box {
    transition-duration: 0.2s;
    transform: scale(1.05);
    box-shadow: 0 0 1rem #f5222d;
  }
</style>